<template>
  <div class="rankingsBox">
    <div class="rankings_center">
      <!-- 书籍排名 -->
      <RankingList :favoriteList="scoreList" title='Popularity list'/>
      <RankingList :favoriteList="word_countListList" title="Word Count list"/>
      <RankingList :favoriteList="favoriteList" title='Favorites list'/>
      <RankingList :favoriteList="finish" title='Finished book ranking'/>
      <RankingList :favoriteList="hitsList" title='Hot search list'/>
      <RankingList :favoriteList="update_tmeList" title='UpdateTme list'/>
    </div>
  </div>
</template>

<script>
import RankingList from "../../components/RankingList.vue";
import { RankingsApi } from "../../requery/api";
export default {
  data() {
    return {
      favoriteList: [], //喜爱排行
      word_countListList: [], //字数排行
      scoreList: [], //分数排行
      hitsList: [], //点击排行
      update_tmeList: [], //更新排行
      finish: [], //你喜欢的书
    };
  },
  created() {
    // favorite
    RankingsApi({
      page: 1,
      size: 10,
      order_by: "favorite",
    }).then((res) => {
      if (res.code == 200) {
        this.favoriteList = res.data;
      }
      console.log(res);
    });
    // ord_countList
    RankingsApi({
      page: 1,
      size: 10,
      order_by: "ord_countList",
    }).then((res) => {
      if (res.code == 200) {
        this.word_countListList = res.data;
      }
      console.log(res);
    });
    // score
    RankingsApi({
      page: 1,
      size: 10,
      order_by: "score",
    }).then((res) => {
      if (res.code == 200) {
        this.scoreList = res.data;
      }
      console.log(res);
    });
    // hits
    RankingsApi({
      page: 1,
      size: 10,
      order_by: "hits",
    }).then((res) => {
      if (res.code == 200) {
        this.hitsList = res.data;
      }
      console.log(res);
    });
    // update_tme
    RankingsApi({
      page: 1,
      size: 10,
      order_by: "update_tme",
    }).then((res) => {
      if (res.code == 200) {
        this.update_tmeList = res.data;
      }
      console.log(res);
    });
    // 完本
    RankingsApi({
      page: 1,
      size: 10,
      order_by: "",
      is_finish:1
    }).then((res) => {
      if (res.code == 200) {
        this.finish = res.data;
      }
      console.log(res);
    });
  },
  components: {
    RankingList,
  },
};
</script>
 
<style lang = "less" scoped>
.rankingsBox {
  width: 100vw;
  .rankings_center {
    width: 1160px;
    margin: 60px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>